<div class="crayons-card crayons-card--content-rows">
  <header>
    <h2 class="crayons-subtitle-1">
      <%= t("views.settings.password.heading") %>
    </h2>
    <p class="color-base-70">
      <%= t("views.settings.password.desc_html", path: new_user_password_path, email: current_user.email) %>
    </p>
  </header>
  <%= form_with(url: user_update_password_path, data: { testid: "update-password-form" }) do |f| %>
    <div class="crayons-field mb-4">
      <%= f.label :current_password, t("views.settings.password.current"), class: "crayons-field__label" %>
      <%= f.password_field :current_password, class: "crayons-textfield", autocomplete: "off", required: true %>
    </div>
    <div class="crayons-field mb-4">
      <%= f.label :password, t("views.settings.password.new"), class: "crayons-field__label" %>
      <%= f.password_field :password, class: "crayons-textfield", autocomplete: "off", required: true %>
    </div>
    <div class="crayons-field mb-4">
      <%= f.label :password_confirmation, t("views.settings.password.confirm"), class: "crayons-field__label" %>
      <%= f.password_field :password_confirmation, autocomplete: "off", class: "crayons-textfield", required: true %>
    </div>
    <button class="crayons-btn crayon-btn--secondary" type="submit"><%= t("views.settings.password.submit") %></button>
  <% end %>
</div>
